<template>
    <center>
        <div style="width: 700px">
            <el-input
                    placeholder="您的姓名"
                    v-model="name"
                    :disabled="true">
            </el-input>
            <div style="margin: 20px 0;"></div>
            <el-input
                    placeholder="您的邮箱"
                    v-model="email"
                    :disabled="true">
            </el-input>
            <div style="margin: 20px 0;"></div>
            <el-input
                    placeholder="您的电话号码"
                    v-model="phone">
            </el-input>
            <div style="margin: 20px 0;"></div>

            <div style="display: flow;float: left;margin-bottom: 20px">
                <span>处理类别：</span>
                <el-radio v-model="radio" label="建议">建议</el-radio>
                <el-radio v-model="radio" label="投诉">投诉</el-radio>
            </div>

            <div style="margin: 20px 0;"></div>
            <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入您的宝贵建议或投诉内容"
                    v-model="textarea">
            </el-input>
            <div style="margin: 20px 0;"></div>
            <el-button type="primary" @click="submit">提交</el-button>
        </div>
    </center>
</template>

<script>
export default {
    name: "consult",
    created() {
        //在页面加载时读取sessionStorage里的状态信息
        if (sessionStorage.getItem("store") ) {
            this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
        }
        //在页面刷新时将vuex里的信息保存到sessionStorage里
        window.addEventListener("beforeunload",()=>{
            sessionStorage.setItem("store",JSON.stringify(this.$store.state))
        })
        this.getInfo();

    },
    data() {
        return {
            name: '',
            email: '',
            phone: '',
            textarea: '',
            radio: '建议'
        }
    },
    methods:{
        getInfo(){
            var vm = this;
            this.axios({
                url: '/myapi/user/userMessage/updateuserMessage/'+vm.$store.state.id,
                method: 'get'
            }).then(function (response) {
                if(response.data.success === true){
                    console.log(response.data);
                    //console.log(response.data.content.token);
                    vm.name = response.data.content.uname;
                    vm.phone = response.data.content.uphone;
                    vm.email = response.data.content.uemail;
                }
                else {
                    vm.$message.error('未知错误!');
                }
            });
        },
        submit() {
            var vm = this;
            let id = vm.$store.state.id;
            this.axios({
                url: '/myapi/user/consultComplaint/addConsultComplaint',
                method: 'post',
                //使用data是body传参，使用params是query传参
                data: {
                    ccContext: vm.textarea,
                    ccEmail: vm.email,
                    ccName: vm.name,
                    ccPhone: vm.phone,
                    ccCategory: vm.radio,
                    uid: vm.$store.state.id,

                }
            }).then(function (response) {
                if(response.data.success === true){
                    console.log(response.data);
                    vm.$message({
                        message: '提交成功!感谢您的建议',
                        type: 'success'
                    });
                }
                else {
                    vm.$message.error('提交失败!');
                }
            });
        }
    }
}
</script>

<style scoped>

</style>
